import React, { useState, useEffect } from "react";
import RenderList from "./components/renderList";
import EndCom from "./components/endCom";

const RenderButton = React.lazy(() => {
  return import("./components/renderButton");
});

const TestCom = <div>12323</div>;

function App() {
  const [Com, setCom] = useState(null);
  const [Com2, setCom2] = useState(null);

  useEffect(() => {
    require.ensure([], () => {
      const data = require("./components/renderData").default;
      setCom(data);
    });
    import(
      /* webpackChunkName:"renderInput" */ "./components/renderInput"
    ).then((res) => {
      setCom2(res.default);
    });
  }, []);

  return (
    <React.Suspense fallback={<div>loading</div>}>
      {Com2}
      {TestCom}
      <RenderButton />
      <RenderList />
      {Com}
      <EndCom />
    </React.Suspense>
  );
}

export default App;
